<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>todoList-千锋教育</title>
	<link rel="stylesheet" href="index.css">
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<!-- 头部结构 -->
		<header>
			<section>
				<form action="javascript:void(0)" id="form">
					<label for="title">ToDoList</label>
					<!-- 头部输入框 -->
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off"
						@keydown.13="submit" />
				</form>
			</section>
		</header>
		<!-- 内容容器 -->
		<section>
			<h2>正在进行 <span id="todocount">{{todoarr.length}}</span></h2>
			<!-- 待办列表 -->
			<ol id="todolist" class="demo-box">
				<!-- li结构 -->
				<li draggable="true" v-for="(item , index) in todoarr" :key='item'><input type="checkbox"  @change="addDone(index)">
					<p id="p-0" @click="changeInp(index)" v-if="item.falg">{{item.content}}</p><input placeholder="按下enter确认修改" class="newInp" type="text" @keydown.13="removeInp(index)" v-else="" v-model="item.content"><a @click="delTodo(index)" href="javascript:void(0)" >-</a>
				</li>
			</ol>
			<h2>已经完成 <span id="donecount">{{donearr.length}}</span></h2>
			<!-- 完成列表 -->
			<ul id="donelist">
				<!-- 完成结构 -->
				<li draggable="true" v-for="(item , index) in donearr" :key='item'><input type="checkbox" checked="true" @change="addTodo(index)">
					<p id="p-0">{{item.content}}</p><a @click="delDone(index)" href="javascript:void(0)">-</a>
				</li>
			</ul>
		</section>
		<footer>
			千锋教育
		</footer>
	</div>
</body>
<script src="lib/Vue2.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				todoarr: JSON.parse(localStorage.getItem('todo'))||[],
				donearr: JSON.parse(localStorage.getItem('done'))||[]
			}
		},
		methods: {
			submit(e) {
				if(!e.target.value) return
				this.todoarr.push({
					falg:true,
					content:e.target.value
				})
				e.target.value = ''
				this.setarr()
			},
			addDone(index){
				this.donearr.push(this.todoarr[index])
				window.event.target.checked = false
				this.todoarr.splice(index,1)
				this.setarr()
			},
			addTodo(index){
				this.todoarr.push(this.donearr[index])
				this.donearr.splice(index,1)
				window.event.target.checked = true
				this.setarr()
			},
			changeInp(index){
				this.todoarr[index].falg = false
				this.setarr()
			},
			removeInp(index){
				this.todoarr[index].falg = true
				this.setarr()
			},
			delDone(index){
				this.donearr.splice(index , 1)
				this.setarr()
			},
			delTodo(index){
				this.todoarr.splice(index , 1)
				this.setarr()
			},
			setarr(){
				localStorage.setItem('todo' , JSON.stringify(this.todoarr))
				localStorage.setItem('done' , JSON.stringify(this.donearr))
			}
		}
	})
</script>

</html>